<!-- 客户对账表 -->
<template>
	<view>
		<hx-navbar ref="hxnb" :config="config" @clickBtn="clickBtn"></hx-navbar>
		<u-scroll-list :indicator="false" class="p-b-0">
			<view class="top-view p-t-20">
				<view class="flex flex-sa f-35 m-b-10">
					<view class="f-35 t_item">
						<view class="flex flex-c f-32 text-color"> 总收入 </view>
						<view class="flex flex-c f-30 m-b-10"> {{total_data.amountReceive||0}} </view>
					</view>
					<view class="f-35 t_item">
						<view class="flex flex-c f-32 text-color"> 总支出 </view>
						<view class="flex flex-c f-30 m-b-10"> {{total_data.amountPay||0}} </view>
					</view>
					<view class="f-35 t_item">
						<view class="flex flex-c f-32 text-color"> 累存 </view>
						<view class="flex flex-c f-30 m-b-10"> {{total_data.debtTotal||0}} </view>
					</view>
				</view>
				<view class="flex flex-c p-b-20" style="opacity: 0.7;">
					<text>前存</text>
					<text class="p-l-8">{{total_data.originDebt||0}}</text>
				</view>
			</view>
		</u-scroll-list>
		<u-sticky offset-top="0">
		  <c-time @success="timeSuccess" defaultTime="setThirtyDaysAgo">
		    <view class="flex s-content" slot="content">
		      <view class="check-account flex flex-dlii select-item"
		        @click="goRoute('pages/application/pages/cloth/sales-ticket/index?page=return&type=return')">
		        <!-- <text class="grey p-r-10">{{ billId.data.keywords || '选客户' }}</text> -->
		        <!-- <u-icon v-if="!billId.data.keywords" name="arrow-down-fill" color="#ccc" size="10"></u-icon>
		        <text class="c-99" v-else>x</text> -->
		      </view>
		    </view>
		  </c-time>
		</u-sticky>
		
		<view class="list-view p-t-20">
			<mosoweTable class="table-view" :column="column" :localData="requestMethod" dataListKey="content" dataTotalKey="totalCount"
				  @onSortChange="onSortChange"
				  @onGetTdItemChange="toNextPage"
				  :pagination = 'false'
	>
	<!-- slot="nameDefault"  插槽是根据column 下每个对象下的value值 + 固定值(Default) 进行覆盖渲染-->
				  <template slot="accountNameDefault" slot-scope="colnum">
					<view class="a-i-c flex" style="align-items: center;">
						<u--image shape="circle" src="https://cdn.uviewui.com/uview/album/1.jpg" width="16px" height="16px"></u--image>
						<text class="m-l-6">{{ colnum.rowData.accountName}}</text>
					</view>
				  </template>
				  <template slot="amountReceiveDefault" slot-scope="colnum">
					<view class="a-i-c">
						<view><text class="p-r-10">{{ colnum.rowData.amountReceive||0 }}</text></view>
					</view>
				  </template>
				  <template slot="amountPayDefault" slot-scope="colnum">
						<view class="a-i-c">
							<view><text class="p-r-10">{{ colnum.rowData.amountPay||0 }}</text></view>
						</view>
				  </template>
			</mosoweTable>
		</view>
	</view>
</template>

<script>
	import cTime from '@/pages/application/pages/finance/accounts-receivable-payable/components/time.vue'
	import mosoweTable from '@/components/mosowe-table/mosowe-table.vue'
	import { finAmountListPage_footing, finAmountListPage,listGroupByAccountPage,listGroupByAccountPageFooting } from "@/apis/bill/reconciliation";
	
	export default {
		name: 'Custom',
		components: {
		  cTime,
		  mosoweTable
		},
		data() {
			return {
				config: {
				  title: "账户",
				  color: "#ffffff",
				  //背景颜色;参数一：透明度（0-1）;参数二：背景颜色（array则为线性渐变，string为单色背景）
				  backgroundColor: [1, ["#409EFF", "#409EFF", "#60b4f6", "#60b4f6"]],
				  rightButton: [
				    {
				      key: "btn1",
				      icon: "&#xe888;",
				      position: "left",
				    },
				  ],
				},
				isMore: false,
				total_data: {},
				params: {
					data: {"isCancel":"0","beginTime":"2023-07-27"},
					page: {
						current: 1,
						size: 999,
						order: "desc"
					}
				},
				indexList: [],
				time: '',
				// 表格
				requestMethod:[],
				column: [{
						text: '序号',
						value: 'index',
						fixed: 'left',
						width: 40
						
					},{
						text: '账户',
						value: 'accountName',
						sortable: true,
						align: 'center',
						fixed: 'left',
						width: 80
					},
					{
						text: '前存',
						value: 'canDeliverUseQuantity',
						sortable: true,
						align: 'center'
					},
					{
						text: '收入',
						value: 'amountReceive',
						align: 'center'
					},
					{
						text: '支出',
						value: 'amountPay',
						align: 'center'
					},
					{
						text: '累存',
						value: 'currentPiecesCount',
						sortable: true,
						align: 'center'
					}
				],
			}
		},
		onLoad() {
			
			// 客户
			uni.$on('on-sales-ticket', data => {
			  
			})
		},
		onUnLoad() {
			uni.$off("on-sales-ticket")
		},
		methods: {
			clickBtn(item) {
			  // if (item.key === "btn1") {
			  //   this.show = true
			  // }
			},
			showMore() {
				this.isMore = !this.isMore;
			},
			// 获取时间参数
			timeSuccess(val) {
				// console.log(val)
				this.params.data.beginTime = val[0]
				this.getList()
				this.getTotal()
			  this.time = `${val[0]}~${val[1]}`
			  
			},
			// 路由跳转
			goRoute(url) {
				uni.navigateTo({
				  url: url
				})
			},
			// 获取总数
			getTotal() {
				// listGroupByAccountPageFooting().then(res=>{
				// 	if (!res.flag) return;

				// 	this.total_data = res.data;
				// })
			},
			// 列表
			getList() {
				uni.showLoading({
					title: '加载中...'
				})
				listGroupByAccountPage(this.params).then(res=>{
					// console.log('[ listGroupByAccountPage ] >', res)
					if (!res.flag) return;
					const data = res.data || {};
					if (this.params.page.current == 1) {
					  this.requestMethod = data.records;
					} else {
					  this.requestMethod = [...data.records, ...this.indexList];
					}
					this.requestMethod.map((item,index)=>{
						item.index = index+1
						return item
					})
					uni.hideLoading()
				}).catch(()=>{
					uni.hideLoading()
				})
			},
			// 表格排序
			onSortChange(obj) {
				console.error(obj)
			},
			// 跳转下一页
			toNextPage(val) {
				uni.navigateTo({
					url: `/pages/application/pages/finance/reconciliation/account/list?accountId=${this.requestMethod[val.index].accountId}&accountName=${this.requestMethod[val.index].accountName}&time=${this.time}`
				})
			},
		},
		mounted() {
			
		}
	}
</script>

<style lang="scss" scoped>
	.top-view {
		flex: 1;
		background: linear-gradient(to right, rgb(64, 158, 255), rgb(64, 158, 255), rgb(96, 180, 246), rgb(96, 180, 246));
		color: #fff;
		.t_item {
			flex: 1;
			position: relative;
			&::after {
				content: "";
				position: absolute;
				right: 0;
				top: 0;
				width: 1rpx;
				height: 70%;
				background: #dfdfdf;
			}
			&:last-child {
				&::after {
					content: "";
					width: 0rpx;
				}
			}
		}
		.more-view {
			justify-content: center;
			height: 80rpx;
			align-items: center;
		}
	}
	.list-view {
		.item-view {
			background: #fff;
			padding: 20rpx;
			.name {
				font-weight: bold;
				padding-bottom: 10rpx;
			}
			.dl-view {
				justify-content: space-between;
			}
			.info-list {
				background: #f2f2f2;
				padding: 20rpx;
				.dl-item {
					display: flex;
					padding-bottom: 8rpx;
					.dt, .dd {
						flex: 1;
					}
				}
			}
		}
	}
</style>

